<template>
  <div>
    <div class="home_div">
      <!-- 头部 -->
      <my-header :header_bgk="header_bgk"></my-header>
      <!-- 轮播部分 -->
      <my-rotation :banner_data="home_data.bannerList"></my-rotation>
      <!-- 消息通知部分 -->
      <my-message :message="home_data.message" class="message"></my-message>
      <!-- 快捷入口 -->
      <quick-entry :quick_data="home_data.quick_list"></quick-entry>
      <!-- 登记出售 我的出售 -->
      <quick-oper class="quick_oper" v-if="home_data.quick_list"></quick-oper>
      <!-- 值得看部分 -->
      <my-news class="my_news" :news_data="home_data.news_list"></my-news>
      <!-- 热门推荐模块 -->
      <hot-rec :hot_rec_data="home_data.hot_rec_list"></hot-rec>
      <!-- 内容 标题部分 -->
      <my-title v-if="home_data.quick_list"></my-title>
      <!-- 账号数据展示部分 -->
      <div v-if="skin_dataV2.length">
        <!-- <show-in-fo
          v-for="(item, index) of skin_data.gameid"
          :key="item.gameid"
          :game_data_index="index"
          :game_data="skin_data"
        /> -->
        <ShowInFoV2 
          v-for="item of skin_dataV2"
          :key="item.gameid"
          :game_data="item"
        />
      </div>
      <!-- 查看更多部分 -->
      <load-more
        @click.native="to_goodList"
        v-if="skin_dataV2.length"
      ></load-more>
      <!-- 错误 显示 -->
      <!-- {{skin_data.gameid}} -->
      <div class="err" v-if="!skin_dataV2.length">
        <img src="../../assets/img/err/icon-page-failed.png" />
      </div>
      <p class="err_font" v-if="!skin_dataV2.length">加载失败，请刷新重试</p>
      <!-- 底部组件 -->
      <my-footer></my-footer>
    </div>
  </div>
</template>
<script>
import MyHeader from "./components/Header"; // 头部
import MyRotation from "./components/Rotation"; // 轮播插件
import MyMessage from "./components/Message"; // 消息通知
import QuickEntry from "./components/QuickEntry"; // 快捷入口
import QuickOper from "./components/QuickOper"; //  登记 售出 快捷入口
import MyNews from "./components/News"; // 值得看部分
import HotRec from "./components/HotRec"; // 热门推荐模块
import MyTitle from "./components/Title"; // 内容标题部分
// import ShowInFo from "./components/ShowInFo"; // 账号展示部分
import ShowInFoV2 from "./v2/ShowInFo"; // 账号展示部分
import LoadMore from "./components/LoadMore"; // 加载更过
import MyFooter from "../common/Footer"; // 底部组件
import { mapGetters, mapActions } from "vuex";

export default {
  name: "Home",
  components: {
    MyRotation,
    MyHeader,
    MyMessage,
    QuickEntry,
    QuickOper,
    MyNews,
    HotRec,
    MyTitle,
    // ShowInFo,
    ShowInFoV2,
    LoadMore,
    MyFooter,
  },
  created() {
    // 发起网络请求
    this.getHomeData(); // 请求 首页配置数据
    // this.getSkinList(); // 请求 皮肤展示数据
    this.getSkinListV2()
  },
  data() {
    return {
      // 控制 头部颜色
      header_bgk: false,
      home_data: {}, //首页配置数据
      skin_data: {}, //皮肤展示数据
      skin_dataV2: [], // 皮肤展示数据v2
    };
  },
  methods: {
    // 页面滚动事件
    page_scroll() {
      if (window.pageYOffset > 30) {
        this.header_bgk = true;
      } else {
        this.header_bgk = false;
      }
    },
    // 获取首页 配置数据
    async getHomeData() {
      // this.$message.loading({message:'数据加载中...'});
      const { data: res } = await this.$http.get("getHomeData").catch((err) => {
        // 请求超时
        this.$message({ position: "center", message: "请求超时 服务器未响应" });
        // this.$router.push('/neterr');
        return;
      });
      console.log(res);
      if (!res.isok)
        return this.$message({ position: "center", message: res.message });
      this.home_data = res.data;
      // this.$message.clear();
      // console.log(this.home_data);
      // this.$message({position:"center",message:res.message});
    },
    // 请求 首页皮肤展示数据
    async getSkinList() {
      this.$message.loading({ message: "数据加载中..." });
      // 先请求IP地址
      // const ip = await this.getip();
      const { data: res } = await this.$http
        .get("getSkinList", { params: { search: "new" } })
        .catch((err) => {
          // 请求超时
          this.$message({
            position: "center",
            message: "请求超时 服务器未响应",
          });
          // this.$router.push('/neterr');
          return;
        });
      if (!res.isok)
        return this.$message({ position: "center", message: res.message });
      this.skin_data = res.data;
      this.$message.clear();
      this.$message({ position: "center", message: res.message });
    },
    // 获取首页皮肤数据v2版本
    async getSkinListV2(){
      this.$message.loading({ message: "数据加载中..." });
      const {data:res} = await this.$http.get('/v2/getSkinList')
      if(res.state !== 200) return this.$message.error(res.message)
      this.skin_dataV2 = res.data.game_list
      this.$message.clear();
      this.$message({ position: "center", message: res.message });
    },
    async getip() {
      // 去 vuex 里 查询 是否有IP 如果有 则 不请求 如果没有则请求
      if (this.getIp) return this.getIp;
      console.log("请求了IP地址");
      let url = "https://v1.alapi.cn/api/ip";
      const { data: res } = await this.$http.get(url);
      let ip = res.data.ip;
      // 赋值给vuex
      this.setIp(ip);
      return ip;
      // return "11.11.11.11"
    },
    to_goodList() {
      this.$router.push("/goodslist");
    },
  },
  mounted() {
    window.addEventListener("scroll", this.page_scroll);
  },
};
</script>
<style lang="less" scoped>
.quick_oper {
  margin-top: 0.06rem;
}
.message {
  font-size: 0.2rem !important;
}
.err {
  margin: 0 auto;
  margin-top: 0.2rem;
  width: 1.14rem;
  height: 1.14rem;
  img {
    width: 100%;
  }
}
.err_font {
  width: 100%;
  font-size: 0.14rem;
  text-align: center;
  color: #888888;
  margin-bottom: 1rem;
}
.load_more {
  padding-top: 0.2rem;
}
</style>